<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="adm-panel">
			<div class="adm-panel-hd">
				<div class="index-hd">
					<router-link to="/">
						<i class="iconfont icon-home"></i>
					</router-link>
				</div>
				<el-tabs v-model="editableTabsValue" type="card" closable>
					<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="adm-panel-body ">
				<el-container class="el-container-scroll">
					<el-aside class="adm-side" width="180px">
						<div class="el-heading">
							<div class="el-tit">文书目录</div>
						</div>
						<div class="scroll ht6">
						<el-menu class="el-sidebar-menu">
							<el-menu-item index="1">卷内文书目录</el-menu-item>
							<el-menu-item index="2">接处警登记表(1)</el-menu-item>
							<el-menu-item index="3">受案登记表</el-menu-item>
							<el-menu-item index="4">受案回执</el-menu-item>
							<el-menu-item index="5">书证</el-menu-item>
							<el-menu-item index="6">物证照片</el-menu-item>
							<el-menu-item index="7">音视频资料</el-menu-item>
							<el-menu-item index="8">移送案件通知书</el-menu-item>
							<el-menu-item index="9">指定管辖决定书</el-menu-item>
							<el-menu-item index="10">其他证明案件</el-menu-item>
							<el-menu-item index="11">回避申请材料</el-menu-item>
							<el-menu-item index="12">回避决定书</el-menu-item>
						</el-menu>
						</div>
					</el-aside>
					<el-container>
						<el-main class="adm-el-main">
							<div class="adm-el——bd">
								<el-row :gutter="30" class="el-files">
									<el-col v-for="item in files" :span="6" :key="item">
										<div class="file-box">
											<img :src="item.img" alt="">
										</div>
									</el-col>
								</el-row>
								<div class="file-foot">
									<el-button type="red">上一步</el-button>
									<el-button type="zi">提交</el-button>
									<el-button type="lv">取消</el-button>
								</div>
							</div>
						</el-main>
					</el-container>
				</el-container>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				imageUrl: '',
				imageUrl2: '',
				editableTabsValue: '1',
				editableTabs: [{
					title: '行政案件列表',
					name: '1',
				},{
					title: '受案登记-文书预览',
					name: '2',
				}],
				tabIndex: 1,
				files:[
					{
						img:require('../../assets/images/filte.png')
					},
					{
						img:require('../../assets/images/filte.png')
					},
					{
						img:require('../../assets/images/filte.png')
					},
					{
						img:require('../../assets/images/filte.png')
					}
				],
				bg:require('../../assets/images/bg.jpg'),
				skin:"skin1",
			}

		},
		methods: {
			handleChange(file, fileList) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(fileList)
			},
			handleChange2(file, fileList) {
				this.imageUrl2 = URL.createObjectURL(file.raw);
				console.log(fileList)
			},
			getData(data) {
				console.log(data)
				if(data ==1){
					this.bg = require('../../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(data == 2){
					this.skin = "skin2"
					this.bg = require('../../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../../assets/images/bg2.png')
				}
			}
		}
	}
</script>
